<template>
  <div id="container" class="box">
    <div id="bottom-right" class="special_focus_toolTip" style="display:none;">
      <el-row>
        <el-col :span="20">
          <div style="margin-top:10px;">
            <span style="color:yellow;font-size:18px;font-weight:bold;margin-left:5px;">部件数据列表</span>
          </div>
        </el-col>
        <el-col :span="4">
          <button style="margin-top:1px;margin-left:10px;cursor:pointer;border:1px solid aqua;height:30px;border-radius:5px;color:aqua;background: rgba(66, 85, 99, 0.5);">
            <span style="margin-left:10px;margin-right:10px;font-size:14px;" @click="hideComponenetPanel">关闭</span>
          </button>
        </el-col>
      </el-row>

      <hr style="border:1px solid;border-color:aqua;"/>

      <span v-if="componentList.length!=0" style="color:aqua;margin-left:2px;">共 <span style="color:yellow;font-size:18px;font-weight:bold;">{{ total }}</span> 个部件</span>
      <el-table v-if="componentList.length!=0" :data="componentList" style="margin-top:5px;" :cell-style="{borderColor:'aqua'}" :header-cell-style="{borderColor:'aqua'}">
        <el-table-column label="序号" align="center" type="index" width="50" />
        <el-table-column label="部件名称" align="left" prop="name">
          <template slot-scope="scope">
            <span>{{scope.row.name}}</span>
          </template>
        </el-table-column>
      </el-table>

      <pagination
          v-show="total>0"
          :total="total"
          background
          :layout.sync="layout"
          :showSizeChanger="true"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getObjectList"
          style="background-color:transparent !important;"
          class="msg-pagination-container"
        />
        <br />
    </div>
    <div id="toolbar" class="special_focus_toolTip">
      <fieldset style="border:1px solid aqua;border-radius:5px;">
        <legend><span style="color:yellow;font-weight:bold;font-size:18px;">地图操作</span></legend>
        <span style="color:aqua;margin-left:10px;">鼠标左键地图平移，拖动鼠标右键地图放大缩小，长按鼠标滚轮旋转地图,滚动鼠标滚轮也可放大缩小地图。</span>
      </fieldset>
      <fieldset style="border:1px solid aqua;border-radius:5px;margin-top:5px;">
        <legend><span style="color:yellow;font-weight:bold;font-size:18px;">数据目录</span></legend>
        <el-tree
          :data="treeData"
          :props="defaultProps"
          node-key="uuid"
          ref="tree"
          :default-expand-all="false"
          @node-click="handleNodeClick"
        >
        <span slot-scope="{ node, data }" class="custom-tree-node">
          <!--可以根据情况，以数据类型来显示不同的图标或图片-->
          <i v-if="node.level == 1" class="el-icon-folder" />
          <i v-if="node.level == 2" class="el-icon-folder-checked" />
          <i v-if="node.level == 3" class="el-icon-folder-opened" />
          <i v-if="node.level == 4" class="el-icon-tickets" />
          <span style="margin-left:5px;">{{ data.name }}</span>
        </span>
        </el-tree>
      </fieldset>
    </div>
    <div id="cesiumContainer" ></div>
    <el-dialog  :title="mTitle" :visible.sync="mOpen" append-to-body width="100%" style="margin-top:-80px;z-index:99999">
      <div style="width:100%;height:1150px;margin-top:-30px;margin-left:-10px;">
        <span style="font-weight:bold;color:#1890FF;font-size:18px;margin-bottom:5px;">部件编辑 ( 数据集： {{ ObjectInfo.datasetName }} 【 {{ ObjectInfo.datasetCode }} 】；数据对象：{{ ObjectInfo.name }} )</span>
        <model-map-view :key="datekey" :datasetId="ObjectInfo.datasetId" :objectId="ObjectInfo.uuid" :path="ObjectInfo.path" style="width:99%;border-radius:5px;"></model-map-view>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getTreeRootData } from "@/api/system/gismap";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import IconSelect from "@/components/IconSelect";
import { listComponents } from "@/api/system/component"; 
import { getObjectinfo } from "@/api/system/objectinfo";
  export default {
    components: { Treeselect, IconSelect },
    data() {
      return {
        datekey: null,
        mTitle: "部件查询",
        mOpen: false,
        activeName: "first",
        treeData: [],
        componentList: [],
        ObjectInfo: {},
        defaultProps: {
          children: "children",
          label: "name"
        },
        total: 0,
        layout: 'prev, next',
        queryParams: {
          pageNum: 1,
          pageSize: 20,
        },
      }
    },
    created() {
      this.getTreeRootData();
    },
    mounted() {
      this.init();
    },
    computed: {},
    methods: {
      hideComponenetPanel(){
        document.getElementById("bottom-right").style.display = "none";
      },
      handleNodeClick(object){
        if(object.level==4){
          getObjectinfo(object.uuid).then(res =>{
            this.ObjectInfo = res.data;
          })
          this.queryParams.datasetId = object.datasetId;
          this.queryParams.objectId = object.uuid;
          listComponents(this.queryParams).then(res =>{
            this.componentList = res.rows;
            this.total = res.total;
            document.getElementById("bottom-right").style.display = "block";
          })
          window.viewer.entities.removeAll();
          this.goto();
          const position = Cesium.Cartesian3.fromDegrees(
            Number(103.31750000000000),
            Number(24.82537190763543),
            Number(1800)
          );
          //弧度的航向分量。
          var heading = Cesium.Math.toRadians(26);
          //弧度的螺距分量。
          var pitch = 0;
          //滚动分量(以弧度为单位)
          var roll = 0;
          //HeadingPitchRo11旋转表示为航向，俯仰和滚动。围绕Z轴。节距是绕负y轴的旋转。滚动是关于正x轴。var hpr = new Cesium.HeadingPitchRoll(heading,pitch, roll);var orientation = Cesium.Transforms.headingPitchRollOuaternion(position,
          var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
          var orientation = Cesium.Transforms.headingPitchRollQuaternion(position,hpr);
          window.viewer.entities.add({
            position: position,
            orientation: orientation,
            id: object.uuid,
            name: object.name,
            model: {
              uri: object.path,
              //不管缩放如何，模型的最小最小像素大小。
              minimumPixelsize: 10,
              //模型的最大比例尺大小。 minimumPixelsize的上限。
              maximumScale: 200,
              // modelMatrix : modelMatrix,
              scale : 1,//调整模型在地图中的大小
              heightReference: Cesium.HeightReference.CLAMP_TO_GROUND //贴地设置
            },
          });
        }
      },
      getObjectList(){
        this.queryParams.datasetId = this.ObjectInfo.datasetId;
        this.queryParams.objectId = this.ObjectInfo.uuid;
        listComponents(this.queryParams).then(res =>{
          this.componentList = res.rows;
          this.total = res.total;
        })
      },
      getTreeRootData(){
        getTreeRootData().then(res =>{
          this.treeData = res.data;
        })
      },
      init() {
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkYzI1YjE0MS05YjYzLTQ4MjYtODAyMS03YTdmZTllYjlmNTIiLCJpZCI6NjE3NDQsImlhdCI6MTY5NzQ1NzM0Mn0.4iT43DCcj3UiNeg6fbf5sfEp-wcHFwYzym6YV9KV8O4';
        Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);
        var viewer = new Cesium.Viewer('cesiumContainer', {
          terrainProvider: Cesium.createWorldTerrain(),
          animation: false, //是否显示动画控件
          shouldAnimate: false,
          homeButton: true, //是否显示Home按钮
          fullscreenButton: false, //是否显示全屏按钮
          baseLayerPicker: false, //是否显示图层选择控件
          geocoder: false, //是否显示地名查找控件
          timeline: false, //是否显示时间线控件
          // creditContainer: "credit", //版权图标
          sceneModePicker: false, //是否显示投影方式控件
          navigationHelpButton: false, //是否显示帮助信息控件
          infoBox: false, //是否显示点击要素之后显示的信息
          selectionIndicator: false, //是否启用地图选择
          // sceneModePicker: true,//是否启用场景选择小部件
          // requestRenderMode: false, //启用请求渲染模式
          //sceneMode: 3,
          shadows: false,
          imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
            url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
          }),
          contextOptions: {
            webgl: {
              antialias: true,
              multisample: true
            }
          }
        });
        viewer._cesiumWidget._creditContainer.style.display = "none";
        viewer.scene.debugShowFramesPerSecond = false;
        viewer.scene.globe.enableLighting = false;  //昼夜划分

        const _this = this;
        viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
          _this.reached = true;
        });
        window.viewer = viewer;

        // 扩展主图初始中心点
        viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function(e) {
          e.cancel = true;
          viewer.entities.removeAll();
          _this.editFlag = false;
          _this.resultPanel = false;
          // 石林中心坐标
          viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(103.312982,24.829662,2500),
            orientation: {
              heading :Cesium.Math.toRadians(35), // 方向
              pitch :Cesium.Math.toRadians(-90.0),// 倾斜角度
              roll :0
            },
          });
        });

        var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        window.handler = handler;

        handler.setInputAction(function(movement) {
          let ray = viewer.camera.getPickRay(movement.position);
          let cartesian = viewer.scene.globe.pick(ray, viewer.scene);
          let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
          let lng = Cesium.Math.toDegrees(cartographic.longitude); // 经度
          let lat = Cesium.Math.toDegrees(cartographic.latitude); // 纬度
          let alt = cartographic.height; // 高度
          let coordinate = {
              longitude: Number(lng.toFixed(14)),
              latitude: Number(lat.toFixed(14)),
              altitude: Number(alt.toFixed(8))
          };
          console.log(coordinate)
          var pick = viewer.scene.pick(movement.position);
          if(pick!=undefined&&pick.id!=undefined){
            if(pick.detail.model!=undefined&&pick.detail.model!=null){
              if(pick.detail.model.type=="GLTF"){
                _this.mOpen = true;
                _this.datekey = Date.now();
              }
            }
          }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
      },
      goto() {
        // 定义的中心点
        viewer.camera.flyTo({
          destination: Cesium.Cartesian3.fromDegrees(
            103.31750000000000, 
            24.82537190763543,
            2000
          ),
        });
      }
    },
  }

</script>
<style lang="scss" scoped>
  html,
  body,

  #container{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: absolute;
  }
  #cesiumContainer {
    width: inherit;
    height: inherit;
  }

  .box {
    height: 100%;
  }

  .special_focus_toolTip {
    margin: 5px;
    z-index: 7;
    position: absolute;
    display: block;
    width: 460px;
    height: auto;
    border-style: solid;
    transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1),
      top 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    background: rgba(66, 85, 99, 0.5);
    border-width: 0px;
    border: 1px solid aqua;
    border-radius: 4px;
    color: #ffffff;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-stretch: normal;
    font-size: 14px;
    font-family: "Microsoft YaHei";
    line-height: 21px;
    padding: 10px 10px;
  }
/* 下划线切换高亮 */
::v-deep .el-tabs__active-bar {
  background-color: yellow;
}

::v-deep .el-tabs__nav-wrap::after {
  background-color: aqua
}

/* 鼠标选中时样式 */
::v-deep .el-tabs__item.is-active {
  color: yellow;
  opacity: 1;
}
/* 鼠标悬浮时样式 */
::v-deep .el-tabs__item:hover {
  color: yellow;
  cursor: pointer;
  opacity: 1;
}
::v-deep .el-tabs__item {
  color: aqua;
  opacity: 1;
}
::v-deep .el-input__inner {
  background-color: transparent !important;
  color:aqua;
  border: 1px solid aqua;
}

::v-deep .el-input__inner::-webkit-input-placeholder{
  color: aqua; // 初始化的文字颜色
}

/*最外层透明*/
::v-deep .el-table{
  background-color: transparent !important;
  color: aqua;
  border: none !important;
  border-bottom: 1px solid aqua !important;
}

::v-deep .el-table th {
  background-color: transparent!important;
  border: 1px solid aqua !important;
  color: aqua;
}

::v-deep .el-table tr {
  background-color: transparent !important;
  border: 1px solid aqua !important;
}

::v-deep .el-table td {
  background-color: transparent!important;
  border: 1px solid aqua !important;
}

::v-deep .el-pagination.is-background .btn-prev {
  background: transparent !important; 
  border: 1px solid aqua;
  color: aqua;
}
::v-deep .el-pagination.is-background .btn-next{
  background: transparent !important; 
  border: 1px solid aqua;
  color: aqua;
}
#bottom-right {
  background: rgba(66, 85, 99, 0.8);
  padding: 4px;
  border-radius: 4px;
  position: absolute;
  display: block;
  height: auto;
  top: 0px;
  right: 0px;
}
::v-deep .el-tree{
  background: transparent !important; 
  color: aqua;
}
::v-deep .el-tree-node__content:hover {
  background: rgba(104,147,215,0.4);// hover 节点背景色，否则是白色
}
::v-deep .el-tree-node:focus>.el-tree-node__content {
  background-color: rgba(0,0,0,0); // focus 节点背景透明，否则是白色
}
</style>
